<template>
  <div style="margin: 50px">
    <el-form
      ref="addGoods"
      :model="goods"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      hide-required-asterisk
    >
      <!-- 第一行 -->
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="goods.name" size="small" style="width: 200px" />
      </el-form-item>
      <!-- 第二行 -->
      <div style="display: flex">
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goods.price" size="small" style="width: 100px" />
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
          <el-select
            v-model="goods.type"
            placeholder="请选择"
            size="small"
            style="width: 100px"
          >
            <el-option
              v-for="item in goodsType"
              :key="item._id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- 第三行 -->
      <div style="display: flex">
        <el-form-item label="商品状态">
          <el-tooltip :content="goods.status ? '出售' : '停售'" placement="top">
            <el-switch
              v-model="goods.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="审核状态" style="margin-left: 60px">
          <el-select
            v-model="goods.check"
            placeholder="请选择"
            size="small"
            style="width: 100px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- 第四行 上传图片 -->
      <div style="display: flex">
        <el-form-item label="商品略缩图" label-width="100px">
          <el-upload
            :class="{ hide: hideUploadT }"
            action="/resource/goods/img"
            list-type="picture-card"
            ref="uploadT"
            :auto-upload="false"
            :limit="1"
            :on-success="successT"
            :on-change="changeT"
            :on-remove="removeT"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品详情图" label-width="100px">
          <el-upload
            :class="{ hide: hideUploadD }"
            action="/resource/goods/images"
            list-type="picture-card"
            ref="uploadD"
            :auto-upload="false"
            :limit="5"
            :on-success="successD"
            :on-change="changeD"
            :on-remove="removeD"
            multiple
            :on-exceed="exceedD"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </div>
      <!-- 第五行 描述 -->
      <el-form-item label="商品描述">
        <el-input
          type="textarea"
          v-model="goods.desc"
          style="width: 300px"
          rows="3"
        ></el-input>
      </el-form-item>
      <!-- 第六行 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('addGoods')" size="small"
          >添加</el-button
        >
        <el-button @click="$router.push('/goods')" size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getProduct } from "../../api/product";
import goodsApi from "../../api/goods";
export default {
  data() {
    return {
      hideUploadT: false,
      hideUploadD: false,
      goods: {
        userId: "60a353bad1daad0ae81d7138",
        name: "显卡3090",
        price: "19999",
        type: "",
        status: true,
        check: 0,
        desc: "贼牛逼",
        img: [],
        images: [],
        // 做效验和数据无关
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
      },
      goodsType: [],
      options: [
        {
          value: -1,
          label: "未通过",
        },
        {
          value: 0,
          label: "待审核",
        },
        {
          value: 1,
          label: "已通过",
        },
      ],
    };
  },
  async created() {
    const data = await getProduct();
    this.goodsType = data.map((item) => {
      return { value: item.typeOne, label: item.typeOne, _id: item._id };
    });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            this.$refs.uploadT.uploadFiles.length > 0 &&
            this.$refs.uploadD.uploadFiles.length > 0
          ) {
            this.$refs.uploadT.submit();
          } else {
            this.$message.error("请添加图片");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    successT(res) {
      this.goods.img.push(res.url);
      this.$refs.uploadD.submit();
    },
    async successD(res) {
      this.goods.images.push(res.url);
      if (this.goods.images.length == this.$refs.uploadD.uploadFiles.length) {
        const data = await goodsApi.add(this.goods);
        if (data) {
          setTimeout(() => {
            this.$message({ type: "success", message: "添加成功!!!" });
            this.$router.push("/goods");
          }, 500);
        }
      }
    },
    exceedD() {
      this.$message({ type: "warning", message: "详情图最多添加5张" });
    },
    changeT(file, fileList) {
      this.hideUploadT = fileList.length >= 1;
    },
    changeD(file, fileList) {
      this.hideUploadD = fileList.length >= 5;
    },
    removeT(file, fileList) {
      this.hideUploadT = fileList.length >= 1;
    },
    removeD(file, fileList) {
      this.hideUploadD = fileList.length >= 5;
    },
  },
};
</script>

<style lang="scss">
.hide .el-upload--picture-card {
  display: none;
}
</style>
